<template>
    <div class="loginwrap">
        <div class="logo">
            <image
                class="logoImg"
                src="https://img2.baidu.com/it/u=620833131,3260986266&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
                mode="scaleToFill"
            />
        </div>
        <!-- 表单 -->
        <div class="formWrap">
            <div class="accountBox">
                <input v-model="formData.useName" class="accountInput" placeholder="请输入账号" />
            </div>
            <div class="accountBox passBox">
                <input v-model="formData.password" class="accountInput" placeholder="请输入密码" />
            </div>
            <div class="boxsubmit" @click="handleLogin">登录</div>
            <div class="appbox">
                <div @click="handleToForgetPwd">忘记密码</div>
                <div @click="handleToRegister">去注册&gt;</div>
            </div>
            <!-- 第三方登录 -->
            <div class="otherlogin">
                <image class="icon" :src="WXIcon" mode="scaleToFill" @click="handleWXLogin" />
            </div>
            <!-- 第三方协议 -->
            <div class="agree">
                <checkbox-group @change="onChangeCheck">
                    <label>
                        <checkbox :value="agreeCheckBox" :checked="agreeCheckBox" />
                    </label>
                </checkbox-group>
                <div class="agreeBox">
                    我同意<span class="xieText">«用户协议»</span>与<span class="xieText"
                        >«隐私协议»</span
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// import {passwdEncoding} from '@/service/login'
import WXIcon from '@/assets/wx.png'
import { passwdEncoding, accountLogin , WXLogin } from '@/service/login'
import { ref } from 'vue'
import { Base64 } from 'js-base64'
//  表单数据
interface TFormData {
    useName: string
    password: string
}
const formData: TFormData = {
    useName: '',
    password: ''
}

const agreeCheckBox = ref<Boolean>(false)
//  点击登录
const onChangeCheck = (e: any) => {
    const state: Boolean = e.detail.value[0] ? Boolean(e.detail.value[0]) : false
    agreeCheckBox.value = state
}
const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
const handleLogin = async () => {
    // 判断 是否阅读
    if (!agreeCheckBox.value) {
        uni.showModal({
            content: '请确认你已阅读并同意《用户协议》和 《隐私政策》',
            showCancel: false,
            success(res) {
                if (res.confirm) {
                    console.log('用户点击确定')
                }
            }
        })
        return
    }
    if (!pattern.test(formData.useName)) {
        uni.showToast({
            icon: 'none',
            title: '手机号格式错误',
            duration: 2000
        })
        return
    }
    if (!formData.password) {
        uni.showToast({
            icon: 'none',
            title: '请输入密码',
            duration: 2000
        })
        return
    }
    // 对他进行加密转换
    const utf8Str = Base64.encode(formData.password)

    const result = await passwdEncoding(
        { str: utf8Str },
        {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }
    )
    if (result.code === '200') {
        const { data } = result
        const res: any = await accountLogin(
            {
                phone: formData.useName,
                password: data,
                siteCode: '1721805485310611456'
            },
            {
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        )
        if (res.code === '200') {
            uni.setStorageSync('userInfo', JSON.stringify(res.data))
            uni.setStorageSync('token', `Bearer ${res.data.accessToken}`)
            uni.reLaunch({
                url: '/pages/index/index'
            })
        } else {
            uni.showToast({
                icon: 'none',
                title: res.msg
            })
        }
    }
}
// 点击忘记密码

const handleToForgetPwd = (): void => {
    // .navigateTo({
    //     url:'/mainPages/forgetPwd/index'
    // })
    uni.navigateTo({
        url: '/mainPages/forgetPwd/index'
    })
}
// 点击注册
const handleToRegister = (): void => {
    uni.navigateTo({
        url: '/mainPages/register/index'
    })
}
const WXLoginApi = async (data: any) => {
    const result = await WXLogin(data)
    if(result.code==='200'){
        // 这里 返回是否 绑定 没有绑定 去绑定 没有绑定这接登录
    }
}
// 点击微信授权 登录
const handleWXLogin = () => {
    uni.login({
        provider: 'weixin', // 使用微信登录
        success(loginRes) {
            uni.getUserInfo({
                withCredentials: true,
                success: ({ userInfo, rawData, signature, encryptedData, iv, errMsg }) => {
                    // console.log('userInfo',userInfo)
                    // console.log('rawData',rawData)
                    // console.log('loginRes',loginRes.code)
                
                    WXLoginApi({
                        code: loginRes.code,
                        type:'wechatMini',
                        siteCode:'1721805485310611456'
                    })
                },
                fail() {
                    uni.showToast({
                        title: `获取用户信息失败`,
                        icon: 'none',
                        duration: 2000
                    })
                },
                complete() {
                    uni.hideLoading()
                }
            })
        },
        fail: () => {
            uni.showToast({
                title: '登录失败',
                icon: 'none',
                duration: 2000
            })
        }
    })
}
</script>
<style scoped lang="scss">
.loginwrap {
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    .logo {
        // width: calc(100% - 40p);
        height: 200px;
        border-radius: 20px;
        .logoImg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
    }
    .formWrap {
        width: 100%;
        margin-top: 20px;
        height: 200px;
        .accountBox {
            height: 38px;
            border: 1px solid #ccc;
            border-radius: 10px;
            .inputplaceholder {
                font-size: 14px;
                color: red;
            }
            .accountInput {
                text-align: center;
                height: 38px;
                line-height: 38px;
                font-size: 14px;
            }
        }
        .passBox {
            margin-top: 20px;
        }
        .boxsubmit {
            width: 100%;
            height: 38px;
            margin-top: 20px;
            background: rgb(56, 156, 253);
            border-radius: 18px;
            text-align: center;
            color: #fff;
            line-height: 38px;
        }
        .appbox {
            display: flex;
            height: 38px;
            margin-top: 10px;
            font-size: 14px;
            color: rgb(56, 156, 253);
            justify-content: space-between;
        }
        .otherlogin {
            height: 80px;
            width: 100%;
            display: flex;
            justify-content: center;
            .icon {
                width: 40px;
                height: 40px;
            }
        }
        .agree {
            width: 100%;
            justify-content: center;
            display: flex;
            align-items: center;
            font-size: 14px;
            .agreeBox {
                color: #ccc;
                .xieText {
                    color: rgba(26, 186, 241, 1);
                }
            }
        }
    }
}
</style>
